import React, { useState } from 'react';
import {
    StyleSheet, Platform, NativeSyntheticEvent,
    NativeScrollEvent,
} from 'react-native';
import { TabView, TabBar, SceneRendererProps } from 'react-native-tab-view';
import {
    PanGestureHandler,
    TapGestureHandler,
    NativeViewGestureHandler,
} from 'react-native-gesture-handler';
import { IProgram } from '@/models/album';
import Introduction from './Introduction';
import List from './List'

export interface ITabProps {
    panRef: React.RefObject<PanGestureHandler>;
    tapRef: React.RefObject<TapGestureHandler>;
    nativeRef: React.RefObject<NativeViewGestureHandler>;
    onScrollDrag: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
    onItemPress: (data: IProgram, index: number) => void;
}
interface IRoute {
    key: string;
    title: string;
}
interface IState {
    routes: IRoute[];
    index: number;
}

function Tab(props: Readonly<ITabProps> & Readonly<IState>) {
    const { panRef, tapRef, nativeRef, onScrollDrag, onItemPress } = props;
    const [index, setIndex] = useState(1);

    const renderScene = ({ route }: { route: IRoute }) => {
        switch (route.key) {
            case 'introduction':
                return <Introduction />;
            case 'albums':
                return (
                    <List
                        panRef={panRef}
                        tapRef={tapRef}
                        nativeRef={nativeRef}
                        onScrollDrag={onScrollDrag}
                        onItemPress={onItemPress}
                    />
                );
        }
    }
    const renderTabBar = (props: SceneRendererProps & { navigationState: IState }) => {
        return (
            <TabBar
                {...props}
                scrollEnabled
                tabStyle={styles.tabStyle}
                labelStyle={styles.label}
                style={styles.tabbar}
                indicatorStyle={styles.indicator}
            />
        );
    };
    return <TabView
        navigationState={{
            routes: [
                { key: 'introduction', title: '简介' },
                { key: 'albums', title: '节目' },
            ],
            index
        }}
        onIndexChange={setIndex}
        renderScene={renderScene}
        renderTabBar={renderTabBar}
    ></TabView>
}
const styles = StyleSheet.create({
    tabStyle: {
        width: 80,
    },
    label: {
        color: '#333',
    },
    tabbar: {
        backgroundColor: '#333',
        ...Platform.select({
            android: {
                elevation: 0,
                borderBottomColor: '#e3e3e3',
                borderBottomWidth: StyleSheet.hairlineWidth,
            },
        }),
    },
    indicator: {
        backgroundColor: '#eb6d48',
        borderLeftWidth: 20,
        borderRightWidth: 20,
        borderColor: '#fff',
    },
});
export default Tab